<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form 객체</title>
<script type="text/javascript">
	var ctrl = {
	// 사용자에게 메시지를 전달시켜 주는 메서드
	message: function(msg) {
		alert(msg);
	},
	// 문자를 받아 문자의 길이가 0보다 긴지 확인하여 
	// 참(true) 혹은 거짓(false) 값을 반환하는 메서드
	hasText: function(str) {
		return (str.length > 0);
	},
	// <form name="loginForm"> 객체를 점검하여 
	// 참(true) 혹은 거짓(false) 값을 반환하는 메서드
	validate: function() {
		// <form> 엘리먼트를 변수에 담아 둔다.
		var elForm = document.forms['loginForm'];
		var elUserId = elForm.userid;
		// userid <input>엘리먼트의 입력받은 글자가 0보다 크지 않다면(없다면)
		if (!this.hasText( elUserId.value )) {
			// 메시지 전달
			this.message('정확한 아이디를 입력해 주십시오!');
			// 주시 설정
			elUserId.focus();
			// 폼전송되지 않도록 false 반환
			return false;
		}
		var elUserPw = elForm.userpw;
		// userpw <input>엘리먼트의 입력받은 글자가 0보다 크지 않다면(없다면)
		if (!this.hasText( elUserPw.value )) {
			// 메시지 전달
			this.message('정확한 암호를 입력해 주십시오!');
			// 주시 설정
			elUserPw.focus();
			// 폼전송되지 않도록 false 반환
			return false;
		}
		this.message('데이터를 전송합니다.');
	}
};
</script>
</head>
<body>
	<h1>입력 받은 문제 데이터 검증하기</h1>
	<form name="loginForm" action="9-1.html" onsubmit="return ctrl.validate();">
		ID: <input type="text" name="userid" />
		PW: <input type="password"  name="userpw" />
		<button type="submit">보내기</button>
	</form>
</body>
</html>
